<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-on  绑定某个事件 v-on:click   keyup -->
        <!-- 简写@  @click -->
        <!-- 内连接 -->
        <button type="button" v-on:click="length++">改变边长</button>
        <!-- 外联式，推荐 -->
        <button type="button" v-on:click="changeBian(1)">改变边长+1</button>
        <button type="button" v-on:click="changeBian(10)">改变边长+10</button>
        <p>1</p>
        <button type="button" v-on:click="changeBian2" value="1">改变边长+1</button>
        <button type="button" v-on:click="changeBian2" value="10">改变边长+10</button>
        <p>正方形的边长是{{length}},他的面积是 {{area}}</p>

        <p>事件处理的原理</p>
        <!-- 1--事件的捕获 -->
        <!-- 2-事件的冒泡  点击内部，外部的也会受到影响 -->
        <!-- stop:阻止事件继续向上传播 -->
        <!-- self:只能由自己触发事件的响应 -->
        <!-- capture 改变事件默认的处理流程  ---冒泡--捕获 -->
        <!-- once 事件只能触发一次 -->
        <!-- prevent 阻止默认事件的发生 -->
        <div id="outer" @click="show('外层被点击')">2222
            <div id="inner" @click.stop="show('内部被点击')">111111</div>
        </div>

         <div id="outer" @click.self="show('外层被点击')">2222
            <div id="inner" @click="show('内部被点击')">111111</div>
        </div>


        <div id="outer" @click.copture="show('外层被点击')">2222
            <div id="inner" @click.once="show('内部被点击')">111111</div>
            <a href="https://baidu.com" v-on:click.prevent>百度</a>
        </div>
        <!-- 如何阻止表单的提交 -->
         <form action="" v-on:submit.prevent>提交</form>
         <!-- 串联阻止向上传递，默认事件 -->
         <a href="" v-on:click.stop.prevent></a>
         <!-- 所进行的结果一致不？ -->
          <!-- 阻止所有的单机事件 -->
         <a href="" v-on:click.prevent.self></a>
          <!-- 阻止自己的单机事件 -->
         <a href="" v-on:click.self.prevent></a>


         <!-- 键盘按键  kedown,keypress,keyup -->
          <!-- 按钮修饰符 -->
           <input type="text" name="" id="" v-on:keyup.enter>
           <input type="text" name="" id="" v-on:keyup.page-down>
           <input type="text" name="" id="" v-on:keyup.pageDown>
           <!-- .enter .tab .delete .esc .space .up .down .left .right -->
            <!-- .ctrl .alt .shift .meta(win/con) -->
             <!-- exact 只有 -->

            <input type="text" name="" id="" v-on:keyup.ctrl.exact.c="show('复制成功')">


            <!-- 鼠标事件 .left .right .middle -->
             <button v-on:click.ctrl.exact="show1('点击了')">按钮</button>






    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    length: 2
                }
            },
            methods: {
                changeBian(data) {
                    this.length += data
                },
                changeBian2(event) {
                    // event.target.value获取dom对象中默认的value值
                    this.length += Number(event.target.value)
                },
                show(msg) {
                    alert(msg)

                },
                 show1(msg) {
                    alert(msg);
                    console.log('A');
                    

                }

            },
            computed: {
                area() {
                    return this.length * this.length

                }
            },
        }).mount('#app')
    </script>
</body>

</html>